<template>
  <a-modal
    v-model:visible="showModal"
    @close="onClose"
    @ok="onConfirm"
    :mask-closable="false"
    :ok-loading="okloading"
    :title="pageTlt"
    class="modal-dialog-wrapper"
    unmount-on-close
    width="45vw"
  >
    <page-form :model="form" layout="vertical" div="true" class="page-form" style="max-height: 600px; width: 100%">
      <page-form-item field="needType" label="组件类型" style="width: 100%" v-if="pageData.isShowHide == 1">
        <a-radio-group v-model="pageData.isControlMust" :options="typeOptions" />
      </page-form-item>
      <!-- 下拉框类型 -->
      <div v-if="pageType == 'select'">
        <div class="tlt">
          <div class="tlt-l">
            <div style="margin-right: 60px">排序</div>
            <div>{{ pageTlt }}</div>
          </div>
          <div>操作</div>
        </div>
        <a-form-item v-for="(item, index) in pageValue" :field="`pageValue[${index}].id`" :key="index" class="form">
          <div class="in-left">
            <div class="move">
              <SvgIcon
                :color="index == 0 ? '#D8D8D8' : '#4E5969'"
                name="sort-up"
                style="width: 16px; height: 16px"
                @click="() => sortUp(item)"
              />
              <SvgIcon
                :color="index + 1 == pageValue.length ? '#D8D8D8' : '#4E5969'"
                name="sort-down"
                style="margin-left: 20px; width: 16px; height: 16px"
                @click="() => sortDown(item)"
              />
              <a-input
                class="form-input"
                v-model="item.dictName"
                :disabled="!item.isEditable"
                placeholder="请输入"
                v-focus
                :max-length="maxLength"
              />
              <a-radio-group class="isEnabled-radio" v-model="item.isEnabled" :disabled="!item.isEditable">
                <a-radio :value="1"> 有效 </a-radio>
                <a-radio :value="0"> 无效 </a-radio>
              </a-radio-group>
            </div>
          </div>
          <div class="add" v-if="pageValue.length == index + 1" @click="add">
            <SvgIcon name="sort-add" color="#0256FF" />
            <div style="cursor: pointer">新增</div>
          </div>
        </a-form-item>
      </div>
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onConfirm">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { systemEdit, systemDetail, systemCodeDetail } from '@/api/system/system'
  import { Message } from '@arco-design/web-vue'

  const props = defineProps({
    maxLength: {
      type: Number,
      default: 9999,
    },
  })

  const add = () => {
    pageValue.value.push({
      id: '',
      dictName: '',
      isEnabled: 1,
      position: pageValue.value.length + 1,
      isEditable: 1,
    })
  }

  const showModal = ref(false)
  const pageValue = ref([]) //下拉框数据
  const pageData = ref(null) //数据
  const pageType = ref('') //类型
  const pageTlt = ref('编辑') //标题
  // const pageSort = ref(false) //是否排序
  const okloading = ref(false)

  const typeOptions = [
    { label: '必填项', value: 1 },
    { label: '非必填项', value: 0 },
  ]

  const show = (id, dictCode) => {
    // 后期合并成一个接口（系统参数里用systemDetail传id，其他页面用systemCodeDetail传dictCode）
    if (id) {
      systemDetail({ id: id }).then((res) => {
        pageData.value = res.result
        if (!res.result) {
          console.log('无数据')
          return false
        }
        pageTlt.value = res.result.dictName
        if (res.result.selectValue && res.result.selectValue.length > 0) {
          pageType.value = 'select'
        }
        // 下拉框类型的
        if (pageType.value == 'select') {
          const newSystemData = res.result.selectValue.sort((a, b) => {
            return a.position - b.position
          })
          // 重新排序
          newSystemData.forEach((element, index) => {
            element.position = index + 1
          })
          pageValue.value = newSystemData
        }
        setTimeout(() => {
          showModal.value = true
        }, 200)
      })
    } else if (dictCode) {
      systemCodeDetail({ dictCode: dictCode }).then((res) => {
        pageData.value = res.result
        if (!res.result) {
          console.log('无数据')
          return false
        }
        pageTlt.value = res.result.dictName
        if (res.result.selectValue && res.result.selectValue.length > 0) {
          pageType.value = 'select'
        }
        // 下拉框类型的
        if (pageType.value == 'select') {
          const newSystemData = res.result.selectValue.sort((a, b) => {
            return a.position - b.position
          })
          // 重新排序
          newSystemData.forEach((element, index) => {
            element.position = index + 1
          })
          pageValue.value = newSystemData
        }
        setTimeout(() => {
          showModal.value = true
        }, 200)
      })
    }
  }

  const sortUp = (item) => {
    var position = item.position
    pageValue.value[position - 1].position = position - 1
    pageValue.value[position - 2].position = position
    const newData = pageValue.value.sort((a, b) => {
      return a.position - b.position
    })
    pageValue.value = newData
  }

  const sortDown = (item) => {
    var position = item.position
    pageValue.value[position - 1].position = position + 1
    pageValue.value[position].position = position
    const newData = pageValue.value.sort((a, b) => {
      return a.position - b.position
    })
    pageValue.value = newData
  }

  const onClose = () => {
    showModal.value = false
  }

  const emit = defineEmits(['save'])

  const onConfirm = () => {
    // 下拉框类型的
    if (pageType.value == 'select') {
      console.log(pageValue.value)
      let flag = pageValue.value.every((item) => item.dictName.trim() != '')
      if (!flag) {
        Message.error('系统参数名称不能为空')
        return
      } else {
        pageValue.value.forEach((element, index) => {
          element.position = index + 1
        })
        systemEdit(pageData.value).then((res) => {
          Message.success(res.message)
          showModal.value = false
          emit('save', res)
        })
      }
    }
  }

  defineExpose({
    show,
  })
</script>

<style lang="less" scoped>
  .page-form {
    margin: 0;
    height: 300px;
    // padding: 0 60px;
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
  .form-input {
    margin: 0 25px;
    width: 55%;
  }
  .form {
    position: relative;
  }
  .add {
    color: #0256ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50px;
    // position: absolute;
    // right: 10px;
  }
  // :deep(.arco-radio-group) {
  //   width: 100px;
  //   display: flex;
  //   justify-content: flex-start;
  // }
  .isEnabled-radio {
    label {
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  // :deep(.arco-radio) {
  //   margin-right: 15px !important;
  //   &:last-child {
  //     margin-right: 0 !important;
  //   }
  // }
  // :deep(.arco-radio-label) {
  //   width: 40px;
  // }
  // :deep(.arco-col-5) {
  //   width: 0;
  //   flex: 0;
  // }
  .tlt {
    color: #1d2129;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 10px;
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    .tlt-l {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-right: 40px;
      width: 60%;
    }
  }
  .in-left {
    width: calc(100% - 60px);
  }
  .move {
    // margin-right: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
</style>
